import React, {useState} from 'react';
import {FlatList, StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle} from "react-native";
import {useTheme} from "@rn-vui/themed";

type NumberKeyBoardProps = {
    style?: StyleProp<ViewStyle>;
    onPress?: (value: string) => void;
};

const numbers = [
    '1', '2', '3', '€5',
    '4', '5', '6', '€10',
    '7', '8', '9', '€20',
    '0', '.', 'CLEAR'
];

export const NumberKeyBoard = (props: NumberKeyBoardProps) => {
    const {colors} = useTheme().theme;
    const {style, onPress} = props;
    const [value, setValue] = useState('');

    const renderItem = React.useCallback(({item}: any) => (
        <TouchableOpacity
            style={{
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: colors.grey4,
                paddingVertical: 20,
                alignItems: 'center',
                justifyContent: 'center',
                flex: 1,
                margin: 5,
            }}
            onPress={() => {
                onPress?.(item);
            }}
            activeOpacity={0.6}
        >
            <Text style={{
                fontSize: 20,
                fontWeight: 'bold'
            }}>{item}</Text>
        </TouchableOpacity>
    ), [colors.grey4, onPress]);

    return (
        <View style={style}>
            <FlatList
                data={numbers}
                renderItem={renderItem}
                keyExtractor={(item, index) => index.toString()}
                numColumns={4}
                scrollEnabled={false}
                style={{width: '100%'}}
            />
        </View>
    );
};

export default React.memo(NumberKeyBoard);
